<template>
  <div class="home">
    <el-row style="position: inherit;">
      <el-col :span="24" class="Header grid-content bg-purple-dark">
        <topTable @topTableChange="topTableChange"></topTable>
      </el-col>
    </el-row>
    <el-row class="mainBox">
      <el-col class="Aside grid-content">
        <asideNav></asideNav>
      </el-col>
      <el-col :span="18" class="Main grid-content bg-purple-light">
        <!--<el-breadcrumb separator-class="el-icon-arrow-right">-->
          <!--<el-breadcrumb-item >首页</el-breadcrumb-item>-->
          <!--<el-breadcrumb-item>活动管理</el-breadcrumb-item>-->
        <!--</el-breadcrumb>-->
        <div class="main">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入侧边导航
import asideNav from 'components/asideNav.vue'
import topTable from 'components/topTable.vue'

export default {
  data () {
    return {}
  },
  components: {
    asideNav,
    topTable
  },
  created: function () {

  },
  mounted: function () {

  },
  methods: {
    topTableChange (val) {
      console.log(val)
    }
  },
  watch: {}
}
</script>

<style lang='scss' scoped type="text/css">
  $headerHeight: 70px;
  .home {
    width: 100%;
    height: 100%;
    .Header {
      height: $headerHeight;
    }
    .mainBox {
      height: calc(100% - #{$headerHeight});
      min-width: 1200px;
      .Aside {
        height: 100%;
        width: 250px;
        background: #324157;
      }
      .Main {
        height: 100%;
        width: calc(100% - 260px);
        margin-left: 5px;
        overflow: auto;
        padding: 20px;
        background-color: #f0f0f0;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
    }
  }
</style>
